<template>
	<view class="detail-content">
		<view class="banner-kong"></view>
		<view class="banner" :style="`background-image:url(${src_op})`">
			<view class="nav">
				<image src="@/static/img/courseBuy/back.png" alt="" class="back" @tap="backHandle"></image>
				<text>基地详情</text>
			</view>
<!-- 上部详情 -->
			<view class="collect-row">
				<view class="collect-btn-row">
					<image src="@/static/img/site/collect.png" alt=""></image>
					<text>收藏</text>
				</view>
				<text class="area-text">{{baseDetail.name}}</text>
				<view class="location">
					<image src="@/static/img/site/location.png" alt="" class="location-img"></image>
					<text>{{baseDetail.siteAddress}}</text>
				</view>
				<view class="title-row">
					<view class="title">
						<view>网球场</view>
						<view>{{baseDetail.capacity}}人</view>
						<!-- <view>{{baseDetail.grade}}分</view> -->
						<view>{{callby.gradeAvg}}</view>
					</view>
					<view class="comments">
						<image src="@/static/img/courseBuy/comments.png" alt=""></image>
						<text>{{baseDetail.evaluateCount}}条评论</text>
					</view>
				</view>
			</view>
		</view>
<!-- 概览 -->
		<view class="summary">
			<view class="summary-title">
				<image src="@/static/img/pay/line.png" alt="" class="line"></image>
				<text>概览</text>
			</view>
			<view class="u-content">
				<u-parse :html="baseDetail.trainingBaseDetail" :tag-style="style"></u-parse>
			</view>
		</view>
<!-- 预约 -->		
		<view class="subscribe">
			<view class="subscribe-title">
				<image src="@/static/img/pay/line.png" alt="" class="line"></image>
				<text>预约</text>
			</view>
			<view class="date-row">
				<view class="date-information" v-for="(item,index) in date">
					<text>{{item.day}}</text>
					<view class="date" @tap="chooseDate(index)"
						:style="current == index ? 'background:#F4333C' : 'background:#fff'">
						<text
							:style="current == index ? 'color:#fff' : item.active ? 'color:#F4333C' : 'color:#999999'">{{item.date}}</text>
						<text
							:style="current == index ? 'color:#fff' : 'color:#999999'">{{item.active ? '有' : '无'}}</text>
					</view>
				</view>
			</view>
			<view class="time">
				<view class="time-row" v-for="item in defultTime.active">
					<view class="time-text">
						<u-icon name="clock-fill" size="34" color="#dbdbdb"></u-icon>
						<text :style="item.isFull ? 'color:#C8C8C8' : 'color:#333333'">{{item.time}}</text>
					</view>
					<view class="radio">
						<u-checkbox-group @change="checkboxGroupChange(item)" shape="circle" active-color="#F4333C">
							<u-checkbox @change="checkboxChange(item)" v-model="item.status" :name="item.id"
								:disabled="item.isFull"></u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
				<view class="empty-kong" v-if="!date[current].active">
					<u-empty text="内容为空" mode="data">
					</u-empty>
				</view>
			</view>
		</view>
<!-- 评价 -->		
		<view class="evaluation">
			<view class="evaluation-title">
				<image src="@/static/img/pay/line.png" alt="" class="line"></image>
				<text>评价</text>
			</view>
			<view class="comprehensive-comments">
				<view class="comments-grade">
					<text>{{callby.gradeAvg}}</text>
					<view class="favorable-rate-row">
						<view class="favorable-rate">
							<text>好评{{callby.goodsEvRate}}</text>
						</view>
						<view class="favorable-rate-img">
							<image src="@/static/img/courseBuy/collect2.png" alt=""></image>
							<image src="@/static/img/courseBuy/collect2.png" alt=""></image>
							<image src="@/static/img/courseBuy/collect2.png" alt=""></image>
							<image src="@/static/img/courseBuy/collect2.png" alt=""></image>
							<image src="@/static/img/courseBuy/collect2.png" alt=""></image>
						</view>
					</view>
					<view class="comments-detail">
						<view>
							<text>· 全部 {{callby.evTotalCount}}</text>
							<text>· 好评 {{callby.goodsEvCount}}</text>
						</view>
						<view>
							<text>· 中评 {{callby.midEvCount}}</text>
							<text>· 差评 {{callby.badEvCount}}</text>
						</view>
					</view>
				</view>
<!-- 所有真实回复 -->
				<view class="comments-row" v-for="(item,index) in newcommit" :key="index">
					<view class="comments-peo">
						<image src="@/static/img/sportPurpose/three.png" alt="" class="header-img"></image>
						<view class="name-date">
							<text class="name">{{item.evname}}</text>
							<text class="date">{{item.createTime}}</text>
						</view>
						<view class="evaluation">
							<text>{{item.grade}}</text>
							<image class="img" src="@/static/img/courseBuy/collect2.png" alt=""></image>
							<image src="@/static/img/courseBuy/collect2.png" alt=""></image>
							<image src="@/static/img/courseBuy/collect2.png" alt=""></image>
							<image src="@/static/img/courseBuy/collect2.png" alt=""></image>
							<image src="@/static/img/courseBuy/collect2.png" alt=""></image>
						</view>
					</view>
					<view class="comments-text">
						<text>{{item.userEvaluate}}</text>
					</view>
					<view class="comments-msg">
						<view class="msg">
							<image src="@/static/img/courseBuy/comments.png" alt="" @tap="commentsApply(item)"></image>
							<text>{{item.child.length}}</text>
						</view>
						<view class="praise">
							<image src="@/static/img/courseBuy/praise2.png" alt=""></image>
							<text>{{item.likes}}</text>
						</view>
					</view>
				<!-- 二级 -->
				
				</view>
			</view>
		</view>
<!-- 回复评论footer -->
		<view class="apply-footer" v-if="applyShow" v-model="aplay"></image>
			<view class="course-comments">
				<view class="comments-input">
					<u-input :clearable="false" :placeholder="placeholder_footer"  v-model="aplay_content" @input="inputall" />
				</view>
				<view class="search-information" >
					<view class="">
						<image src="@/static/img/courseBuy/comments.png" alt="" @click="getNew"></image>
						<!-- <text>3</text> -->
					</view>
					<!-- <view class="">
						<image src="@/static/img/courseBuy/praise2.png" alt="">
						<text>24</text>
					</view> -->
				</view>
			</view>
		</view>
<!-- 回复评论 -->
		<view class="apply-modal" >
			<u-popup v-model="applyShow"   mode="bottom" @close="applyClose">
				<text class="apply-num"  >{{two.childCount}}条回复</text>
				<view class="published"  >
					<view class="userInformation" @tap='choiceFn(two.id,two.evname)'>
						<image :src="two.evaluaterFace" alt=""></image>
						<view class="information">
							<text class="name">{{two.evname}}</text>
							<text class="date">{{two.createTime}}</text>
						</view>
					</view>
					<view class="praise">
						<image src="@/static/img/courseBuy/praise2.png" alt=""></image>
						<text>{{two.grade}}</text>
					</view>
				</view>
				<text class="text">{{two.userEvaluate}}</text>
				<!-- 回复评论 -->
				<scroll-view :scroll-y="true" style="height:600rpx">
				<view class="apply"  >
					<view class="apply-row" v-for="(item,index) in two.child" :key=item.id >
						<view class="published">
							<view class="userInformation"  @tap='choiceFn(item.id,item.evname)'>
								<image :src="applyData.headerImg" alt=""></image>
								<view class="information">
									<text class="name">{{item.evname}}</text>
									<text class="date">{{item.createTime}}</text>
								</view>
							</view>
							<view class="praise">
								<image src="@/static/img/courseBuy/praise2.png" alt=""></image>
								<text>{{item.grade}}</text>
							</view>
						</view>
						<text class="text">回复 <text class="username">楼主</text>
							{{item.userEvaluate}}</text>
					</view>
					<text class="search-all"></text>
				</view>
				</scroll-view>
			</u-popup>
		</view>
		<view class="footer">
			<view class="pay-row">
				<view class="price-all">
					<text>￥</text>
					<text>{{baseDetail.unitPrice}}</text>
					<!-- <text>{{Number(baseDetail.unitPrice).toFixed(2)}}</text> -->
					<text>0/小时</text>
				</view>
				<view class="pay-btn-row">
					<u-button type="default" shape="circle" class="pay-btn" 
						hover-class="none" @click="detailHandle(baseDetail)">提交预约
					</u-button>
				</view>
			</view>
		</view>
		<view class="footer-kong"></view>
	</view>
</template>

<script>
	import {
		API
	} from '../../config/myApi.js';
	export default {
		data() {
			return {
				placeholder_footer:"说点什么~~",
				currentId:'',//当前点击回复人的id
				aplay_content:'',//回复的内容
				baseDetail: {
					
				},
				content: `
					<p>露从今夜白，月是故乡明,露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明</p>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
					<p>露从今夜白，月是故乡明,露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明露从今夜白，月是故乡明</p>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`,
				style: {
					// 字符串的形式
					p: 'margin-top:24rpx',
					img: 'margin-top:34rpx'
				},
				date: [
					// {
					// 	day: '三',
					// 	date: '21',
					// 	active: [
					// 		// {
					// 		// 	time: '08: 00: 00 - 20: 00: 00',
					// 		// 	isFull: false,
					// 		// 	status: false,
					// 		// 	id: 1,
					// 		// },
					// 		// {
					// 		// 	time: '08: 00: 00 - 20: 00: 00',
					// 		// 	isFull: true,
					// 		// 	status: true,
					// 		// 	id: 2,
					// 		// },
					// 		// {
					// 		// 	time: '08: 00: 00 - 20: 00: 00',
					// 		// 	isFull: false,
					// 		// 	status: false,
					// 		// 	id: 3,
					// 		// },
					// 		// {
					// 		// 	time: '08: 00: 00 - 20: 00: 00',
					// 		// 	isFull: false,
					// 		// 	status: false,
					// 		// 	id: 4,
					// 		// }
					// 	]
					// }, 
					// {
					// 	day: '四',
					// 	date: '22',
					// 	active: []
					// },
				    // {
				    // 	day: '五',
				    // 	date: '23',
				    // 	active: []
				    // },
				    // {
				    // 	day: '六',
				    // 	date: '24',
				    // 	active: []
				    // },
				    // {
				    // 	day: '日',
				    // 	date: '25',
				    // 	active: []
				    // },
				    // {
				    // 	day: '一',
				    // 	date: '26',
				    // 	active: []
				    // }, 
				    // {
				    // 	day: '二',
				    // 	date: '27',
				    // 	active: []
				    // }
		     	],
				current: 0,
				value: '',
				comments: [{}, {}, {}, {}, {}],
				applyShow: false,
				//回复评论数据
				applyData: {
					headerImg: '../../static/img/sportPurpose/three.png',
					username: 'C**执着',
					date: '2020-10-19',
					num: 4,
					praise: 24,
					commentsText: '持续的绿色投资驱动下，过去十年，中国在可再生能源、电动车等领域的技术创新脚步不断迈向新高度。',
					apply: [
						{
							headerImg: '../../static/img/sportPurpose/three.png',
							username: '跺脚的小蓝',
							date: '2020-10-19',
							praise: 24,
							commentsText: '持续的绿色投资驱动下，过去十年，中国在可再生能源、电动车等领域的技术创新脚步不断迈向新高度。',
						}, 
						{
							headerImg: '../../static/img/sportPurpose/three.png',
							username: '跺脚的小蓝',
							date: '2020-10-19',
							praise: 24,
							commentsText: '持续的绿色投资驱动下，过去十年，中国在可再生能源、电动车等领域的技术创新脚步不断迈向新高度。',
						},
					]
				},
				id: null,
				applyList:[],
				newcommit:[],
				replyToCommentslist:[],
				evetyid:0,
				newitemList:{},
			  src_op:null,
			  two:{
				  child:''
			  },
			  showtime:{},
			  aplay:{},
			  newdara:'',
			  third:{},
			  onecall:{},
			  tabbar: [], //时间数据
			  week: 0,
			  timeSlot:[],
			  defultTime:[],
			  siteInfo:{},
			  timeArr:[],
			  newbaseid:'',
			  callby:{}
			}
		},
		 onLoad(data) {
			
			this.id = data.id;
		this.getBaseDetail({
				'id': this.id
			})
			// this.getcommit();
		this.getEvaluate();
		this.getDate();
		},
		onShow() {
			
		},
		methods: {
			//点击回复人
			choiceFn(id,name){
				this.currentId=id
				this.placeholder_footer='回复'+name
			},
			
			// 新增数据
			inputall(val){
				this.newdara=val
			},
			//基地详情
			async getBaseDetail(data) {
				data.id = this.id
			const res = await API.getBaseDetail(data)
				if (res.code == 200) {
					const list = res.result;
					this.newbaseid=list.id
					this.goodevent();
					console.log("newbaseid",this.newbaseid);
					this.siteInfo = res.result
					uni.setStorageSync('baseDetail',JSON.stringify(this.date))
					this.date.map(item=>{
						item.active = list.siteTimes;
						item.trainingBaseDayWeekVOS&&item.trainingBaseDayWeekVOS.map(vtem=> {
							item.day = vtem.weekStr;
							item.date = vtem.dateMonthDay.split('-')[1]
						})
						
						item.active&&item.active.map(ktem=>{
							ktem.time = ktem.timeSlot
							ktem.isFull = false;
							ktem.status = false;
							
						})
						this.baseDetail = list;
						console.log('xin',list);
						
						this.src_op=list.trainingBaseCover
					})
				}
			},
			getDate() {
      this.date = [];
      const date = new Date();
      const dayTime = 24 * 60 * 60 * 1000;
      const times = date.getTime();
      for (let i = 0; i < 7; i++) {
		const year = new Date(times + dayTime * i).getFullYear();     
		const day = new Date(times + dayTime * i).getDay();
        const date = new Date(times + dayTime * i).getDate();
        const month = new Date(times + dayTime * i).getMonth();
        // const year = new Date(times + dayTime * i).getFullYear()
		// const weeks = ["周日","周一","周二","周三","周四","周五","周六"]
		// this.date.push({
		// 	day:weeks[i],
		// 	date,
		// 	month: month + 1,
		// 	year:year,
		// 	id: day,
		// })
        if (day == 1) {
          this.date.push({
            day: "周一",
            date: date,
            month: month + 1,
			year:year,
            id: day,
          });
        } else if (day == 2) {
          this.date.push({
            day: "周二",
            date: date,
            month: month + 1,
			year:year,
            id: day,
          });
        } else if (day == 3) {
          this.date.push({
            day: "周三",
            date: date,
            month: month + 1,
			year:year,
            id: day,
          });
        } else if (day == 4) {
          this.date.push({
            day: "周四",
            date: date,
            month: month + 1,
			year:year,
            id: day,
          });
        } else if (day == 5) {
          this.date.push({
            day: "周五",
            date: date,
            month: month + 1,
			year:year,
            id: day,
          });
        } else if (day == 6) {
          this.date.push({
            day: "周六",
            date: date,
            month: month + 1,
			year:year,
            id: day,
          });
        } else if (day == 0) {
          this.date.push({
            day: "周日",
            date: date,
            month: month + 1,
			year:year,
            id: 7,
          });
        }
      }
      this.date.forEach((v) => {
        v.date = `${v.month}-${v.date}`;
      });
      this.week = this.date[0].id;
	  this.defultTime = this.date[0];
	//   this.timeSlot = this.date
      // this.getTime();
    },
			//返回上一级页面
			backHandle() {
				uni.navigateBack()
			},
			// 跳转支付
			detailHandle(item){
				// console.log(item);
				let data = {
					timeArr : this.applyList,
					siteinfo:this.siteInfo
				}
				console.log("data",data);
				uni.navigateTo({
					url:`/pages/base/confirmAppointment?data=${JSON.stringify(data)}`
				})
			},
			// 选择日期
			chooseDate(index) {
				
				this.current = index;
				console.log(index);
				console.log(`${this.date[index].year}-${this.date[index].date}`)
				console.log(this.date[index]);
				this.defultTime = this.date[index]
				// console.log('选择日期',index,baseDetail,week)
			},
			checkboxGroupChange(e) {
				this.$forceUpdate()
			},
			
			checkboxChange(val) {
				let newTime = `${this.defultTime.year}-${this.defultTime.date}`
				this.siteInfo.newTime = newTime
				if (this.applyList.some(i=>i.id == val.id)) {
					let index = 0;
					this.applyList.forEach((a,b)=>{
						if (a.id == val.id) index = b;
					})
					this.applyList.splice(index,1);
				}else {
					this.applyList.push(val);
				}
				console.log(this.applyList);
			},
			//打开评论回复
			commentsApply(chlidren) {
				this.applyShow = true;
				this.two=chlidren
			},
			//关闭评论回复
			applyClose() {
				this.applyShow = false;
			},
			// 评论获取
			goodevent(){
				console.log("newbaseid11111",this.newbaseid);
				var nbk ={
					id:this.newbaseid,
				}
				API.goodcall(nbk).then((res)=>{
					if(res.code==200){
						console.log("评分回复",res);
						this.callby=res.result
					}
				})
				
			},
			
			// 评价获取（数据为空 未渲染）
			// getcommit(){
			// 	// let commitlist={
			// 	// 	page: 1,
			// 	// 	rows: 10,
			// 	// 	baseId:this.id
			// 	// }
			// 	// API.basecomments(commitlist).then(res=>{
			// 	// 	if(res.code==200){
			// 	// 		console.log("评分",res.result);
			// 	// 	}
			// 	// })
			// },
			// 评价渲染
			getEvaluate(){
				// console.log("123123",evaluate);
				API.baseevaluate({
					trainingBaseId: this.id
				}).then(res=>{
					if(res.code==200){
						
						this.newcommit=res.result.records;
						console.log(this.newcommit);
					}
				})
			},
			// 基地数据
			//回复评论
			// 点击评论渲染
		getNew(){
			let one={
				baseId: this.two.baseId,
				evaluateType: 1,
				pid: this.currentId,
				userEvaluate: this.aplay_content
			}
			API.getcall(one).then(res=>{
				if(res.code==200){
					this.applyShow=false
					this.getEvaluate()
					console.log("新回复",res.data);
					
				}
			})
		},
			
			// 每一个基地详情的评论
			
			
		}
	}
	
</script>

<style lang="scss" scoped>
	.detail-content {
		.banner {
			width: 100vw;
			height: 575rpx;
			background: #d9d9d9;
			background-size: cover;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1000;

			.nav {
				width: 100vw;
				height: 88rpx;
				position: relative;
				text-align: center;
				line-height: 88rpx;

				.back {
					width: 18rpx;
					height: 32rpx;
					position: absolute;
					left: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					margin-top: 0px !important;
				}

				>text {
					font-size: 36rpx;
					color: #fff;
				}
			}

			.collect-row {
				width: 690rpx;
				background: #fff;
				position: absolute;
				bottom: -142rpx;
				left: 50%;
				transform: translateX(-50%);
				box-shadow: 2rpx 0 13rpx #E6E4E4;
				border-radius: 12rpx;
				padding: 20rpx 25rpx 50rpx 38rpx;
				display: flex;
				flex-direction: column;

				.collect-btn-row {
					margin-left: auto;
					display: flex;
					align-items: center;

					>image {
						width: 28rpx;
						height: 27rpx;
						margin-top: 0px !important;
					}

					>text {
						font-size: 24rpx;
						color: #A1A1A1;
						margin-left: 9rpx;
					}
				}

				.area-text {
					font-size: 32rpx;
					font-weight: bold;
					color: #151515;
				}

				.location {
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.location-img {
						width: 20rpx;
						height: 22rpx;
						margin-top: 0rpx !important;
					}

					>text {
						font-size: 24rpx;
						color: #8A8A8A;
						margin-left: 10rpx;
					}
				}

				.title-row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 26rpx;

					.title {
						display: flex;

						>view {
							width: 105rpx;
							height: 40rpx;
							background: #FFEDEE;
							border-radius: 8rpx;
							font-size: 24rpx;
							color: #F3343D;
							margin-left: 8rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						>view:first-of-type {
							margin-left: 0rpx;
						}
					}

					.comments {
						>image {
							width: 20rpx;
							height: 20rpx;
							margin-top: 0rpx !important;
						}

						>text {
							font-size: 20rpx;
							color: #9D9D9D;
							margin-left: 4rpx;
						}
					}
				}

				.empty-kong {
					padding: 50rpx 0rpx;
				}
			}
		}

		.summary {
			margin-top: 183rpx;

			.summary-title {
				padding: 0rpx 30rpx;
				display: flex;
				align-items: center;

				.line {
					width: 9rpx !important;
					height: 30rpx !important;
					margin-top: 0rpx !important;
				}

				>text {
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
					margin-left: 18rpx;
				}
			}

			.u-content {
				width: 100vw;
				background: #fff;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				margin-top: 18rpx;
				padding: 0rpx 58rpx 31rpx;
				overflow: hidden;
			}
		}

		.subscribe {
			margin-top: 55rpx;

			.subscribe-title {
				padding: 0rpx 30rpx;
				display: flex;
				align-items: center;

				.line {
					width: 9rpx !important;
					height: 30rpx !important;
					margin-top: 0rpx !important;
				}

				>text {
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
					margin-left: 18rpx;
				}
			}

			.date-row {
				margin-top: 19rpx;
				background: #fff;
				padding: 36rpx 38rpx 25rpx;
				display: flex;
				justify-content: space-between;

				.date-information {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 90rpx;

					>text {
						font-size: 14px;
						color: #666666;
					}

					.date {
						width: 90rpx;
						height: 90rpx;
						border-radius: 45rpx;
						background: #fff;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-top: 20rpx;

						>text:first-of-type {
							font-size: 14px;
							font-weight: bold;
						}

						>text:last-of-type {
							font-size: 12px;
							font-weight: bold;
						}
					}
				}
			}

			.time {
				margin-top: 20rpx;
				background: #fff;
				padding: 0rpx 47rpx;

				.time-row {
					height: 106rpx;
					border-bottom: 1rpx solid #EEEEEE;
					padding: 0rpx 22rpx 0rpx 33rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.time-text {
						display: flex;
						align-items: center;

						>text {
							font-size: 14px;
							margin-left: 21rpx;
						}
					}
				}

				.time-row:last-of-type {
					border-bottom: none;
				}
			}
		}

		.evaluation {
			margin-top: 57rpx;

			.evaluation-title {
				padding: 0rpx 30rpx;
				display: flex;
				align-items: center;

				.line {
					width: 9rpx !important;
					height: 30rpx !important;
					margin-top: 0rpx !important;
				}

				>text {
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
					margin-left: 18rpx;
				}
			}

			.comprehensive-comments {
				padding: 0rpx 30rpx;
				overflow: hidden;
				margin-top: 26rpx;
				background: #fff;

				img {
					margin-top: 0rpx !important;
				}

				.comments-grade {
					height: 208rpx;
					padding: 0rpx 50rpx;
					background: #F7F7F7;
					border-radius: 12rpx;
					margin-top: 29rpx;
					margin-bottom: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					>text {
						font-size: 78rpx;
						font-weight: bold;
						color: #333333;
					}

					.favorable-rate-row {
						height: 100rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 16rpx;

						.favorable-rate {
							width: 109rpx;
							height: 38rpx;
							background-image: url(@/static/img/courseBuy/msgbg.png);
							background-size: cover;
							display: flex;
							justify-content: center;
							align-items: center;

							>text {
								font-size: 20rpx;
								color: #fff;
								margin-left: 8rpx;
							}
						}

						.favorable-rate-img {
							>image {
								width: 21rpx;
								height: 21rpx;
								margin-left: 4rpx;
							}
						}
					}

					.comments-detail {
						height: 100rpx;
						width: 250rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						font-size: 20rpx;

						>view {
							display: flex;

							>text {
								display: block;
								width: 50%;
							}
						}
					}
				}

				.comments-row {
					padding: 37rpx 0rpx 22rpx;
					border-bottom: 1rpx solid #EEEEEE;
					display: flex;
					flex-direction: column;

					.comments-peo {
						display: flex;

						.header-img {
							width: 72rpx;
							height: 72rpx;
						}

						.name-date {
							margin-left: 19rpx;
							height: 72rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							>text {
								display: block;
							}

							.name {
								font-size: 28rpx;
								color: #333333;
							}

							.date {
								font-size: 20rpx;
								color: #868686;
							}
						}

						.evaluation {
							display: flex;
							align-items: center;
							margin-left: auto;

							>text {
								margin-right: 8rpx;
								font-size: 20rpx;
								color: #333333;
							}

							>image {
								width: 21rpx;
								height: 21rpx;
								margin-left: 4rpx;
							}

						}
					}

					.comments-text {
						font-size: 26rpx;
						color: #333333;
						margin-top: 36rpx;
						line-height: 40rpx;
					}

					.comments-msg {
						display: flex;
						margin-left: auto;
						margin-top: 30rpx;

						.msg,
						.praise {
							display: flex;
							align-items: center;

							>image {
								width: 20rpx;
								height: 20rpx;
							}

							>text {
								font-size: 20rpx;
								color: #9D9D9D;
								margin-left: 6rpx;
							}
						}

						.praise {
							margin-left: 20rpx;
						}
					}
				}
			}
		}

		.apply-footer {
			width: 100vw;
			height: 120rpx;
			background: #fff;
			box-shadow: 5rpx 0 20rpx #d6d6d6;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 100000;

			image {
				margin-top: 0rpx !important;
			}

			.course-comments {
				height: 120rpx;
				padding: 0rpx 38rpx 0rpx 28rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				z-index: 100000;

				.comments-input {
					width: 548rpx;
					height: 60rpx;
					border-radius: 30rpx;
					background: #F3F3F3;
					padding: 0rpx 29rpx;
					display: flex;
					align-items: center;
				}
			}

			.search-information {
				display: flex;

				>view {
					>image {
						width: 20rpx;
						height: 20rpx;
					}

					>text {
						font-size: 20rpx;
						color: #9D9D9D;
						margin-left: 6rpx;
					}
				}

				>view:last-of-type {
					margin-left: 23rpx;
				}

			}
		}

		.apply-modal {
			image {
				margin-top: 0rpx !important;
			}
			/deep/.u-mask {
				background-color: rgba($color: #ffffff, $alpha: 0);
			}
			/deep/.u-drawer-bottom {
				bottom: 120rpx;
			}

			/deep/.u-drawer-content {
				border-top-left-radius: 18rpx;
				border-top-right-radius: 18rpx;
				padding: 0rpx 30rpx;
			}

			.apply-num {
				display: block;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				margin-top: 35rpx;
			}

			.published {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 65rpx;

				.userInformation {
					display: flex;
					align-items: center;

					>image {
						width: 72rpx;
						height: 72rpx;
					}

					.information {
						margin-left: 19rpx;

						.name {
							display: block;
							font-size: 28rpx;
						}

						.date {
							display: block;
							font-size: 20rpx;
							color: #868686;
						}
					}
				}

				.praise {
					>image {
						width: 20rpx;
						height: 20rpx;
					}

					>text {
						font-size: 20rpx;
						color: #868686;
						margin-left: 6rpx;
					}
				}
			}

			.text {
				display: block;
				margin-top: 36rpx;
				font-size: 26rpx;
				line-height: 40rpx;
			}

			.apply {
				background: #F4F4F4;
				margin-top: 35rpx;
				padding: 38rpx 26rpx 37rpx 34rpx;
				border-radius: 12rpx;
				display: flex;
				flex-direction: column;
				margin-bottom: 54rpx;
				// max-height: 60vh;
			
				.apply-row {
					border-bottom: 1rpx solid #E0E0E0;
					padding: 22rpx 0rpx 26rpx;
					height: 100%;
					.published {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 0rpx;

						.userInformation {
							display: flex;

							>image {
								width: 54rpx;
								height: 54rpx;
							}

							.information {
								margin-left: 18rpx;

								.name {
									display: block;
									font-size: 26rpx;
								}

								.date {
									display: block;
									font-size: 20rpx;
									color: #868686;
								}
							}
						}

						.praise {
							>image {
								width: 20rpx;
								height: 20rpx;
							}

							>text {
								font-size: 20rpx;
								color: #868686;
								margin-left: 6rpx;
							}
						}
					}
					.text {
						display: block;
						margin-top: 36rpx;
						font-size: 26rpx;
						line-height: 40rpx;
						.username {
							color: #868686 !important;
							margin: 0rpx 14rpx;
						}
					}
				}

				.apply-row:last-of-type {
					border-bottom: none;
				}

				.search-all {
					margin-left: auto;
					color: #2F7DE7;
					font-size: 24rpx;
					margin-top: 31rpx;
				}
			}
		}

		.footer {
			.pay-row {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100vw;
				height: 120rpx;
				box-shadow: 5rpx 0 20rpx #B4B4B4;
				padding: 0rpx 41rpx 0rpx 55rpx;
				background: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.price-all {

					>text:nth-of-type(1),
					>text:nth-of-type(3) {
						font-size: 24rpx;
						color: #F4333C;
					}

					>text:nth-of-type(2) {
						font-size: 34rpx;
						font-weight: bold;
						color: #F4333C;
					}
				}

				.pay-btn-row {
					.pay-btn {
						background-color: #F4333C;
						color: #fff;
						width: 260rpx;
						height: 80rpx;
					}

					.u-hairline-border:after {
						border: none;
					}
				}
			}
		}

		.banner-kong {
			height: 575rpx;
			width: 100vw;
		}

		.footer-kong {
			height: 140rpx;
			width: 100vw;
		}
	}
</style>
